<template>
  <ele-modal
    :width="550"
    :visible="visible"
    :confirm-loading="loading"
    title="导入"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :wrapper-col="{ md: { span: 24 }, sm: { span: 24 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item>
            <div style="margin: 30px 30px">
              <div class="flex align-center justify-between">
                <div>请选择导入的文件</div>
                <a @click="xiazai()">下载模板文件</a>
              </div>
              <div class="margin-top-15">
                <a-upload-dragger
                  accept=".xlsx,.xls,.csv"
                  name="file"
                  :headers="{ Authorization: token }"
                  :data="{ code: props.code }"
                  v-model:file-list="fileList"
                  :before-upload="beforeUpload"
                  :max-count="1"
                  list-type="text"
                  :show-upload-list="true"
                  @remove="handleRemove"
                  @change="uploadHandler"
                >
                  <div>
                    <loading-outlined v-if="loading" />
                    <img class="daoru_img" src="@/assets/daoru.png" v-else />
                    <div class="ele-text-primary">点击上传</div>
                  </div>
                </a-upload-dragger>
              </div>
            </div>
            <div>
              <div class="fs-14 color-999"
                >1、仅支持.xlsx和.csv的Excel文件，推荐.csv文件，导入速度更快。</div
              >
              <div class="fs-14 color-999"
                >2、3000行以上的数据仅支持.csv文件，请在Excel另存为CSV文件后再导入。</div
              >
              <div class="fs-14 color-999"
                >3、仅支持Excel文件中第一个表格的数据导入。</div
              >
              <div class="fs-14 color-999"
                >4、根据表格第一行标题自动匹配数据，第一行作为标题不导入数据。</div
              >
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import { uploadFileUrl } from '@/config/setting';
  import { getToken } from '@/utils/token-util.js';

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    code: String
  });
  const emit = defineEmits(['done', 'download', 'update:visible']);
  const loading = ref(false);
  const token = getToken();

  const fileList = ref([
    /* {
		  uid: '1',
		  name: 'xxx.png',
		  status: 'done',
		  response: 'Server Error 500',
		  url: 'http://www.baidu.com/xxx.png'
		} */
  ]);
  const handleRemove = (file) => {
    const index = fileList.value.indexOf(file);
    const newFileList = fileList.value.slice();
    newFileList.splice(index, 1);
    fileList.value = newFileList;
  };
  const beforeUpload = (file) => {
    //fileList.value = [...fileList.value, file];
    return false;
  };
  const save = () => {
    const formData = new FormData();
    formData.append('file', fileList.value[0]);
    if (props.code) {
      formData.append('code', props.code);
    }
    emit('done', formData);
  };

  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    fileList.value = [info.file];
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      /* imageUrl.value = data.path;
	      form.thumb = data.id; */
    }
  };
  const handleDrop = (e) => {
    console.log('上传', e);
  };
  const xiazai = () => {
    emit('download');
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>

<style></style>
